<script lang="ts" setup>
import Mean from '../../components/Mean.vue'
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useUserInfoStore } from '@renderer/store/useUserInfo.store'
import { addUserApproveInterface, Message, MessageUser, UserInterface } from '@renderer/types'
import { useMessageUserList } from '@renderer/store/messageUser.store'
import { useUserMessageList } from '@renderer/store/userMessage.store'
import { useUserApproveStore } from '@renderer/store/userApproveList.store'
import { useFriendListStore } from '@renderer/store/useFriendList.store'
const route = useRoute()
const includeList = ref<string[]>([])
watch(
  () => route.path,
  () => {
    const name: string = route.name as string
    const index: number = includeList.value.findIndex((item) => item == name)
    if (index == -1) includeList.value.push(name)
  },
  {
    immediate: true
  }
)
onMounted(() => {
  const messageUserListStore = useMessageUserList()
  const userInfoStore = useUserInfoStore()
  const userMessageListStore = useUserMessageList()
  const userApproveStore = useUserApproveStore()
  const friendListStore = useFriendListStore()
  const data = localStorage.getItem('userInfo')
    ? JSON.parse(localStorage.getItem('userInfo')!)
    : null
  userInfoStore.setUserInfo(data)
  window.api.initSocket<
    MessageUser,
    { friend: UserInterface; message: Message },
    addUserApproveInterface,
    UserInterface
  >({
    userId: data.id,
    getMessageUserList: (value): void => {
      messageUserListStore.setUserList(value)
    },
    getNewMessage: ({ friend, message }): void => {
      const index = messageUserListStore.getUserList.findIndex((item) => item.user.id == friend.id)
      if (index == -1) {
        return messageUserListStore.setUserListItem({
          user: friend,
          isWei: 1,
          message: message
        })
      }
      const newMessageUser = {
        user: friend,
        isWei: JSON.parse(JSON.stringify(messageUserListStore.getUserList[index].isWei)),
        message: message
      }
      messageUserListStore.messageUserList.splice(index, 1)
      if (userMessageListStore.selectUserId == friend.id) {
        newMessageUser.isWei = 0
        userMessageListStore.setMessageListItem(message)
        messageUserListStore.setUserListItem(newMessageUser)
      } else {
        newMessageUser.isWei = newMessageUser.isWei + 1
        messageUserListStore.setUserListItem(newMessageUser)
      }
    },
    getUserApproveList: (value): void => {
      userApproveStore.setUserApproveList(value)
    },
    getNewUserApprove: (value): void => {
      userApproveStore.setUserApproveListItem(value)
    },
    getNewUser: (value): void => {
      friendListStore.setUserListItem(value)
    }
  })
})
</script>

<template>
  <div class="home">
    <Mean></Mean>
    <div class="right">
      <router-view v-slot="{ Component }">
        <keep-alive :include="includeList">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<style scoped lang="less">
.home {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .right {
    flex: 1;
  }
}
</style>
